<template>
  <Head title="优惠券统计" />
  <AdminLayout title="优惠券统计" :subtitle="`${coupon.name} (${coupon.code})`">
    <template #actions>
      <Link :href="route('admin.coupons.index')" 
            class="inline-flex items-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-gray-900 focus:border-transparent">
        ← 返回列表
      </Link>
    </template>

    <div class="space-y-6">
      <!-- 优惠券基本信息卡片 -->
      <div class="bg-white rounded-2xl p-6 shadow-sm">
        <div class="flex items-center justify-between mb-4">
          <h3 class="text-lg font-semibold text-gray-900">优惠券信息</h3>
          <div class="flex items-center space-x-2">
            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium"
                  :class="coupon.is_active ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'">
              {{ coupon.is_active ? '启用中' : '已禁用' }}
            </span>
          </div>
        </div>
        
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
          <div>
            <label class="block text-sm font-medium text-gray-500 mb-1">优惠券代码</label>
            <p class="text-sm font-mono text-gray-900 bg-gray-50 px-2 py-1 rounded">{{ coupon.code }}</p>
          </div>
          <div>
            <label class="block text-sm font-medium text-gray-500 mb-1">优惠券类型</label>
            <p class="text-sm text-gray-900">{{ getCouponTypeText(coupon.type) }}</p>
          </div>
          <div>
            <label class="block text-sm font-medium text-gray-500 mb-1">优惠券面值</label>
            <p class="text-sm text-gray-900">{{ formatCouponValue(coupon) }}</p>
          </div>
          <div>
            <label class="block text-sm font-medium text-gray-500 mb-1">有效期</label>
            <p class="text-sm text-gray-900">{{ formatValidityPeriod(coupon) }}</p>
          </div>
        </div>
      </div>

      <!-- 统计数据卡片 -->
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
        <!-- 总发放量 -->
        <div class="bg-white rounded-2xl p-6 shadow-sm">
          <div class="flex items-center">
            <div class="flex-shrink-0">
              <div class="w-8 h-8 bg-blue-100 rounded-lg flex items-center justify-center">
                <svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197m13.5-9a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0z"></path>
                </svg>
              </div>
            </div>
            <div class="ml-4">
              <p class="text-sm font-medium text-gray-500">总发放量</p>
              <p class="text-2xl font-semibold text-gray-900">{{ statistics?.total_distributed || 0 }}</p>
            </div>
          </div>
        </div>

        <!-- 已使用量 -->
        <div class="bg-white rounded-2xl p-6 shadow-sm">
          <div class="flex items-center">
            <div class="flex-shrink-0">
              <div class="w-8 h-8 bg-green-100 rounded-lg flex items-center justify-center">
                <svg class="w-5 h-5 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                </svg>
              </div>
            </div>
            <div class="ml-4">
              <p class="text-sm font-medium text-gray-500">已使用量</p>
              <p class="text-2xl font-semibold text-gray-900">{{ statistics?.total_used || 0 }}</p>
            </div>
          </div>
        </div>

        <!-- 使用率 -->
        <div class="bg-white rounded-2xl p-6 shadow-sm">
          <div class="flex items-center">
            <div class="flex-shrink-0">
              <div class="w-8 h-8 bg-orange-100 rounded-lg flex items-center justify-center">
                <svg class="w-5 h-5 text-orange-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path>
                </svg>
              </div>
            </div>
            <div class="ml-4">
              <p class="text-sm font-medium text-gray-500">使用率</p>
              <p class="text-2xl font-semibold text-gray-900">{{ statistics?.usage_rate || 0 }}%</p>
            </div>
          </div>
        </div>

        <!-- 总优惠金额 -->
        <div class="bg-white rounded-2xl p-6 shadow-sm">
          <div class="flex items-center">
            <div class="flex-shrink-0">
              <div class="w-8 h-8 bg-purple-100 rounded-lg flex items-center justify-center">
                <svg class="w-5 h-5 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1"></path>
                </svg>
              </div>
            </div>
            <div class="ml-4">
              <p class="text-sm font-medium text-gray-500">总优惠金额</p>
              <p class="text-2xl font-semibold text-gray-900">¥{{ statistics?.total_discount || 0 }}</p>
            </div>
          </div>
        </div>
      </div>

      <!-- 使用趋势图表 -->
      <div class="bg-white rounded-2xl p-6 shadow-sm">
        <div class="flex items-center justify-between mb-6">
          <h3 class="text-lg font-semibold text-gray-900">使用趋势</h3>
          <div class="flex items-center space-x-2">
            <span class="text-sm text-gray-500">最近7天</span>
          </div>
        </div>
        
        <div class="h-64 flex items-center justify-center text-gray-500 bg-gray-50 rounded-lg">
          <div class="text-center">
            <svg class="mx-auto h-12 w-12 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path>
            </svg>
            <p class="mt-2 text-sm text-gray-500">图表功能开发中...</p>
          </div>
        </div>
      </div>

      <!-- 最近使用记录 -->
      <div class="bg-white rounded-2xl shadow-sm">
        <div class="px-6 py-4 border-b border-gray-200">
          <h3 class="text-lg font-semibold text-gray-900">最近使用记录</h3>
        </div>
        
        <div v-if="recentUsage.length > 0" class="overflow-x-auto">
          <table class="min-w-full divide-y divide-gray-200">
            <thead class="bg-gray-50">
              <tr>
                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">用户</th>
                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">订单号</th>
                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">优惠金额</th>
                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">使用时间</th>
              </tr>
            </thead>
            <tbody class="bg-white divide-y divide-gray-200">
              <tr v-for="usage in recentUsage" :key="usage.id" class="hover:bg-gray-50">
                <td class="px-6 py-4 whitespace-nowrap">
                  <div class="flex items-center">
                    <div class="flex-shrink-0 h-8 w-8">
                      <div class="h-8 w-8 rounded-full bg-gray-200 flex items-center justify-center">
                        <span class="text-xs font-medium text-gray-600">{{ usage.user?.email?.charAt(0) || 'U' }}</span>
                      </div>
                    </div>
                    <div class="ml-3">
                      <div class="text-sm font-medium text-gray-900">{{ usage.user?.email || '未知用户' }}</div>
                    </div>
                  </div>
                </td>
                <td class="px-6 py-4 whitespace-nowrap">
                  <span class="text-sm font-mono text-gray-900 bg-gray-50 px-2 py-1 rounded">{{ usage.order?.order_number || 'N/A' }}</span>
                </td>
                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-green-600">¥{{ usage.discount_amount || 0 }}</td>
                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ formatDate(usage.used_at) }}</td>
              </tr>
            </tbody>
          </table>
        </div>
        <div v-else class="px-6 py-8 text-center text-gray-500">
          <div class="flex flex-col items-center">
            <svg class="h-8 w-8 text-gray-400 mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
            </svg>
            <p class="text-sm">暂无使用记录</p>
          </div>
        </div>
      </div>
    </div>
  </AdminLayout>
</template>

<script setup>
import { Link } from '@inertiajs/vue3'
import AdminLayout from '@/Layouts/AdminLayout.vue'

const props = defineProps({
  coupon: {
    type: Object,
    required: true
  },
  statistics: {
    type: Object,
    required: true
  },
  recentUsage: {
    type: Array,
    default: () => []
  }
})

const getCouponTypeText = (type) => {
  const types = {
    fixed: '固定金额',
    percentage: '百分比折扣',
    free_shipping: '免运费',
    threshold: '满减券'
  }
  return types[type] || type
}

const formatCouponValue = (coupon) => {
  switch (coupon.type) {
    case 'fixed':
      return `¥${coupon.value}`
    case 'percentage':
      return `${coupon.value}%`
    case 'free_shipping':
      return '免运费'
    case 'threshold':
      return `满${coupon.value}减${coupon.max_discount || coupon.value}`
    default:
      return coupon.value
  }
}

const formatDate = (date) => {
  return new Date(date).toLocaleString('zh-CN')
}

const formatValidityPeriod = (coupon) => {
  if (!coupon.start_time && !coupon.end_time) {
    return '未设置'
  }
  
  const startTime = coupon.start_time ? new Date(coupon.start_time).toLocaleDateString('zh-CN') : '立即生效'
  const endTime = coupon.end_time ? new Date(coupon.end_time).toLocaleDateString('zh-CN') : '永久有效'
  
  return `${startTime} 至 ${endTime}`
}
</script>
